<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">课程对应记录</div>
          </div>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParams.params"
                       :labelCol="{ span: 10 }"
                       :wrapperCol="{ span: 14 }"
                       @on-search="search"
            />
          </div>
          <div class="box-hor-end mb-20">
            <a-tag color="purple">课程认证成功数: 45678</a-tag>
            <a-tag color="cyan">学分置换成功数: 45678</a-tag>
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef"
                     :pagination="pagination"
                     :fetch="fetch"
                     :columns="columns"
                     :operate="operate"
                     :param="state.param"
                     :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          />
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { filterEmptyByObject, btnIsPowerByCode } from "@/tools/common"
import { reactive } from "vue"
import { page } from "@/api/module/courseBaseInfo"

export default {
  setup() {
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })

    const fetch = async param => {
      const response = await page(param)

      if (response.code === 500) {
        return {
          data: [],
          total: 0
        }
      }
    }

    const search = params => {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(params)
      }
    }

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    const operate = [
      {
        label: "查看记录",
      },
      {
        label: "导出",
      },
      {
        label: "删除",
      }
    ]

    const columns = [
      { dataIndex: "", key: "", title: "项目学校" },
      { dataIndex: "", key: "", title: "项目名称" },
      { dataIndex: "", key: "", title: "学期" },
      { dataIndex: "", key: "", title: "项目课程代码" },
      { dataIndex: "", key: "", title: "项目课程名称" },
      { dataIndex: "", key: "", title: "学生本校名" },
      { dataIndex: "", key: "", title: "本校课程代码" },
      { dataIndex: "", key: "", title: "学生本校课程" },
      { dataIndex: "", key: "", title: "学生姓名" },
      { dataIndex: "", key: "", title: "课程认证状态" },
    ]

    const searchParams = reactive({
      params: [
        { span: 8, key: "courseType", type: "input", label: "项目学校名", placeholder: '请输入' },
        { span: 8, key: "courseCode", type: "input", label: "项目名称", placeholder: '请输入' },
        { span: 8, key: "courseName", type: "input", label: "学期", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "input", label: "项目课程名", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "input", label: "学生本校名", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "input", label: "学生本校课程名", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "select", label: "课程认证状态", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "select", label: "学分置换状态", placeholder: '请输入' },
        { span: 8, key: "schoolCnName", type: "rangeTime", label: "报名时间", placeholder: '请输入' },
      ]
    })

    return {
      state,
      pagination,
      operate,
      columns,
      searchParams,
      search,
      fetch,
      filterEmptyByObject,
      btnIsPowerByCode
    }
  }
}
</script>

<style scoped>

</style>
